<template>
  <!-- <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#1e50ae"
      text-color="#fff"
      active-text-color="#ffffff"
      @select="handleSelect"
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">党的建设</el-menu-item>
      <el-menu-item index="3">建设新农村</el-menu-item>
      <el-menu-item index="4" >农业信息</el-menu-item>
      <el-menu-item index="5">联系我们</el-menu-item>
    </el-menu> -->
    <nuxt-link to="/" class="logo ml-20">湟源县人民政府</nuxt-link>
  <header class="header">
    <!-- <div class="container between"> -->
      <!-- <div class="header__left"> -->
       
        <nav class="hidden-sm-and-down mx-auto" >
          <ul>
            <li :class="route.path === '/' ? 'active' : ''" style="border-right: 1px solid #1e50ae;">
              <NuxtLink to="/">首页</NuxtLink>
            </li>
            <!--  根据路由参数判断设置选中状态    -->
            <li v-for="item in navigation" :key="item.id" :class="route.params.column === item.value ? 'active' : ''">
              <nuxt-link :to="`/column/${item.value}`">{{ item.name }}</nuxt-link>
            </li>
          </ul>
        </nav>
      <!-- </div> -->

    <!-- </div> -->

    <div class="mobile-nav hidden-sm-only hidden-sm-and-up">
      <ul>
        <!--  根据路由参数判断设置选中状态    -->
        <li v-for="item in navigation" :key="item.id" :class="route.params.column === item.value ? 'active' : ''">
          <nuxt-link :to="`/column/${item.value}`">{{ item.name }}</nuxt-link>
        </li>
      </ul>
    </div>
  </header>
 <div class="header__pic">
  <img src="../assets//images/city.png" alt="">
 </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const route = useRoute()
const navigation = ref(
  [
    {
      "id": 1,
      "name": "政务要闻",
      "value": "news",
    },
    {
      "id": 2,
      "name": "政府公开信息",
      "value": "publicInformation",
    },
    {
      "id": 3,
      "name": "领导之窗",
      "value": "leadershipWindow",
    },
    {
      "id": 4,
      "name": "魅力湟源",
      "value": "charming",
    },
    {
      "id": 5,
      "name": "政民互动",
      "value": "interaction",
    },
    {
      "id": 6,
      "name": "投资湟源",
      "value": "invest",
    },
    {
      "id": 7,
      "name": "专题专栏",
      "value": "specialColumn",
    },
  ]

)

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss">
.header {
  // position: fixed;
  margin-top: 60px;
  z-index: 999;
  width: 100%;
  height: 55px;
  background-color: #1e50ae;
  
  
    display: flex;

    .logo {
      display: flex;
      // width: 200px;
      height: 55px;
      line-height: 55px;
      font-size: 24px;
      // color: #FF9900;
      font-weight: bold;
      background-position: 50% 50% !important;
      background-size: cover !important;
      overflow: hidden;
    }

    nav {
      ul {
        display: flex;
        li {
          a {
            display: inline-block;
            height: 55px;
            width: 130px;
            line-height: 55px;
            text-align: center;
            font-size: 15px;
            padding: 0 20px;
            // font-size: 18px;
            color: #fff;
          }

          a:hover {
            background-color: #ffffff;
            color: #1e50ae;
            
          }

          // &.active {
          //   a {
          //     background-color: #ffffff;
          //     color: #1e50ae;
          //   }
          // }
        }
      }
    }
  

  &__pic {
    img{
      // margin-top: 95px ;
     height: 380px;
     margin-left: 230px;
    }
  }
}
@media only screen and (max-width:991px) {
    .header {
        position: relative;

        .mobile-nav {
            border-top: #666 solid 1px;
            background: #292838;
            position: absolute;
            height: 46px;
            bottom: -46px;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            box-sizing: border-box;
            padding-top: 8px;
            z-index: 9;

            &::-webkit-scrollbar {
                display: none;
            }

            ul {
                white-space: nowrap;

                li {
                    display: inline-block;
                    position: relative;

                    &.active {
                        a {
                            color: #1583f3;
                        }
                    }

                    a {
                        display: inline-block;
                        padding: 5px 19px;
                        color: #ffffff;
                        font-size: 16px;
                    }
                }
            }
        }
    }

    .header__height__placeholder {
        height: 46px;
    }
}
</style>
